<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/lib/bootstrap.min.css">
    <script src="static/lib/jquery-1.7.2.js"></script>
    <script src="static/lib/bootstrap.js"></script>

    <script src="static/lib/vue.js"></script>
    
    <script>
        $(function () {
            $('#head').load('header.html');

            var i=1;
            $('#validate-img').attr("src","/getVerify?"+Math.random());

            setInterval(function(){
                i++;
                $('#join-us-img').removeAttr("src").attr("src","static/imgs/regist"+i%2+".png");
            },10000);
            $('#username').focusout(function () {
                if($('#username').val()==null||$('#username').val()==""){
                    $('#username').next('p').text("用户名不能为空");
                }else {
                    $('#username').next('p').text(" ");
                }
                $.ajax({
                    //几个参数需要注意一下
                    type: "GET",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/selectbyname?username="+$('#username').val() ,//url
                    success: function (result) {
                        //console.log(result);//打印服务端返回的数据(调试用)
                        if (result.res==1) {
                            $('#username').next('p').text("用户名可用").attr("style","color:green");
                            $('#form-button').removeAttr("disable");
                        } else {
                            $('#username').next('p').text("用户名已注册");
                            $('#form-button').attr("disable","disable");
                        }
                    },
                    error : function() {
                        alert("异常！");
                    }
                });
            })
            $('#password').focusout(function () {
                if($('#password').val()==null||$('#password').val()==""){
                    $('#password').next('p').text("密码不能为空");
                }else {
                    $('#password').next('p').text(" ");
                }
            });
            $('#repwd').focusout(function () {
                if($('#repwd').val()==null||$('#repwd').val()==""){
                    $('#repwd').next('p').text("请再次输入密码");
                }else {
                    $('#repwd').next('p').text(" ");
                }
            });
            $('#email').focusout(function () {
                if($('#email').val()==null||$('#email').val()==""){
                    $('#email').next('p').text("邮箱不能为空");
                }else {
                    $('#email').next('p').text(" ");
                }
                var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
                if(!reg.test($('#email').val())){ //正则验证不通过，格式不对
                    $('#email').next('p').text("请输入正确的邮箱地址");
                }else {
                    $('#email').next('p').text(" ");
                }
            });
            $('#validate').focusout(function () {
                if($('#validate').val()==null||$('#validate').val()==""){
                    $('#validate').next('p').text("验证码不能为空");
                }else {
                    $('#validate').next('p').text(" ");
                }
            });

        });

        function getVerify(obj){
            obj.src = "/getVerify?"+Math.random();
        }
        function regist() {

                    // if($('#username').val()!=null&&
                    //     $('#password').val()!=null&&
                    //     $('#repwd').val()!=null&&
                    //     $('#email').val()!=null&&
                    //     $('#validate').val()!=null&&
            if(
                        $('#username').val()!=""&&
                        $('#password').val()!=""&&
                        $('#repwd').val()!=""&&
                        $('#email').val()!=""&&
                        $('#validate').val()!=""){

                    $.ajax({
                        //几个参数需要注意一下
                        type: "POST",//方法类型
                        dataType: "json",//预期服务器返回的数据类型
                        url: "/register" ,//url
                        data: $('#form1').serialize(),
                        success: function (result) {
                            //console.log(result);//打印服务端返回的数据(调试用)
                            if (result.res==1) {
                                window.location.replace(result.msg + ".html");
                            } else {
                                alert("注册失败！")
                            }
                        },
                        error : function() {
                            alert("异常！");
                        }
                    });
                }

        }
    </script>
    
    <style type="text/css">
        body {background-color: #F5F5F5}
        .logo{
            padding-left: 100px;
        }

        .logo span {
            font-size: 50px;
            color: #A2A2A2;
            display: inline-block;
            position: absolute;
            top: 10px;
        }
        .motto {
            padding-left: 20px;
            margin-top: 27px;
        }

        .login{
            text-align: right;
            font-size: 16px;
            color: #A2A2A2;
            padding-right: 80px;
            margin-top: 55px;
        }
        .phone {
            padding-left:18px ;
            background:  url("./static/imgs/top-tel.jpg") left center no-repeat;
        }
        .login a {
            font-size: 16px;
            color: #A2A2A2;
        }
        .login a:link{color: #A2A2A2}		/* 未访问的链接 */
        .login a:visited {color: #A2A2A2}	/* 已访问的链接 */
        .login a:hover {color: #A2A2A2}	/* 鼠标移动到链接上 */
        .login a:active {color: #A2A2A2}

        .join_us {
            text-align: right ;
            padding-right: 50px;
            padding-top: 60px;
        }
        .join_us img {
            width: 615px;
            height: 615px;
        }
        .regist-form {
            width: 68%;
        }
        .regist-form input{
            display: inline-block;
            margin-bottom: -8px;
            height: 50px;
        }
        .regist-right {
            padding-left:120px ;
        }
        .regist-title {
            margin-top: 60px;
            margin-bottom: 40px;
        }
        .regist-title p {
            font-size: 40px;
            font-style: italic;
        }
        .regist-title p span{
            font-size: 55px;
            font-style: italic;
        }
        .regist-title span {
            font-size: 25px;
        }
        .regist-form p {
            margin-top: 8px;
            margin-bottom: 0px;
            height: 27px;
            color: red;
            font-size: 18px;
        }
        .form-group {
            margin-bottom: 0px;
        }
        .foot {
            clear: both;
            /*background-color: #29333D;*/
            text-align: center;
            color: #868686;
        }
        /*.foot hr {*/
            /*border: none;*/
            /*height: 1px;*/
            /*background-color: #DCDCDC;*/
        /*}*/
        .foot a {
            color: #868686;
        }
        .verification {
            width: 210px;
            height: 50px;
            border: 1px #D3D3D3 solid;
            border-radius: 5px;
        }
        .regist-button {
            margin-top: 11px;
            width: 445px;
            height: 50px;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div id="head" ></div>
    <div class="container-fluid"></div>

        <div class="row">
            <div class="col-sm-6">
                <div class="join_us">
                    <img src="static/imgs/regist1.png" id="join-us-img">
                </div>
            </div>
            <div class="col-sm-5 regist-right">
                <div class="regist-title">
                <p>欢迎注册<span>在考</span></p>
                <span>在线考核，逢考必过。</span>
            </div>
                <div class="regist-form">
                <form id="form1">
                    <div class="form-group">
                        <input type="text" name="name" id="username" class="form-control" placeholder="用户名">
                        <p>&nbsp;</p>
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" id="password" class="form-control" placeholder="密码">
                        <p>&nbsp;</p>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="repwd" placeholder="确认密码">
                        <p>&nbsp;</p>
                    </div>
                    <div class="form-group">
                        <input type="email" name="email" id="email" class="form-control" placeholder="邮箱">
                        <p>&nbsp;</p>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <input type="text" name="viladate" id="viladate" class="form-control" placeholder="请输入验证码">
                            <p>&nbsp;</p>
                        </div>
                        <div class="col-lg-6">
                            <img id="validate-img" src="static/imgs/click.png" onclick="getVerify(this)" class="verification">
                        </div>
                    </div>
                    <button type="button" id="form-button" class="btn btn-primary btn-lg regist-button" onclick="regist()">注册</button>
                </form>

            </div>
            </div>
        </div>
        <div class="foot">
        <hr width="80%"/>
        <p>友情连接</p>
        <span>
            <a>百度一下</a>|
            <a>沈阳日语培训班</a>|
            <a>职业技术学院</a>|
            <a>在职博士</a>|
            <a>深圳英语培训机构</a>|
            <a>辽宁自考</a>|
            <a>深圳培训机构</a>|
            <a>郑大自考</a>
        </span>
        <!--<hr/>-->
        <p>Copyright&copy;2006-2017广州腾科网络技术有限公司 All reserved 粤ICP备12042196号-1</p>
    </div>
    </div>
</body>
</html>